<template>
  <div>
    <el-button type="primary" @click="add">添加角色</el-button>
    <!-- 添加模态框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 表格 -->
    <el-table :data="roluslist" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.children" :key="item.id">
            <el-tag @click="dels(scope.row.id, item.id)">
              {{ item.authName }}
            </el-tag>
            <span v-for="(ele, index) in item.children" :key="ele.id">
              <el-tag type="danger" @click="dels(scope.row.id, ele.id)">
                {{ ele.authName }}
              </el-tag>
              <el-tag
                @click="dels(scope.row.id, el.id)"
                v-for="(el, index) in ele.children"
                :key="el.id"
                type="warning"
              >
                {{ ele.authName }}
              </el-tag>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180">
      </el-table-column>
      <el-table-column prop="roleDesc" label="角色描述" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)"
            >删除</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-s-tools"
            @click="power(scope.row)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑模态框 -->
    <el-dialog title="编辑模态框" :visible.sync="dialogVisible1" width="30%">
      <el-form
        :model="ruleForm1"
        :rules="rules"
        ref="ruleForm1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm1.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm1.roleDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editok">确定编辑</el-button>
          <el-button @click="resetForm('ruleForm1')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 权限模态框 -->
    <!-- :data 绑定要渲染的数据 show-checkbox 展示复选框 default-expand-all 默认展开所有的  node-key相当v-for ref="tree" 相当于给节点起的名字
    highlight-current 选中高亮显示  :props 配置项-->
    <el-dialog title="编辑模态框" :visible.sync="dialogVisible2" width="30%">
      <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :default-expanded-keys="arr"
        :default-checked-keys="arr"
        :props="defaultProps"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getCheckedKey">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteroles,
  gteroled,
  addrole,
  deleterole,
  editrole,
  list,
  addroles,
} from "../utils/api";
export default {
  data() {
    return {
      arr: [],
      roluslist: [],
      dialogVisible: false, //添加模态框
      dialogVisible1: false, //编辑模态框
      dialogVisible2: false, //权限模态框
      ruleForm: {}, //添加数据
      ruleForm1: {}, //编辑数据
      data: [], //权限数据
      defaultProps: {
        children: "children",
        label: "authName",
      },
      roleId: -1,
      rules: {
        roleName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 数据
    getlist() {
      gteroled().then((res) => {
        console.log(res);
        this.roluslist = res.data.data;
      });
    },
    // 添加
    add() {
      this.dialogVisible = true;
    },
    // 确定添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addrole(this.ruleForm).then((res) => {
            // console.log(res);
            this.ruleForm = res.data.data;
            this.getlist();
            if (res.data.meta.status == 201) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
            }
            // 关闭模态框
            this.dialogVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    del(row) {
      //   console.log(row);
      deleterole(row.id).then((res) => {
        // console.log(res);
        this.getlist();
        if (res.data.meta.status == 200) {
          this.$message({
            message: "恭喜你，删除成功",
            type: "success",
          });
        }
      });
    },
    //    编辑
    edit(row) {
      this.dialogVisible1 = true;
      this.ruleForm1 = { ...row };
    },
    // 确定编辑
    editok() {
      editrole(this.ruleForm1).then((res) => {
        console.log(res);
        this.getlist();
        this.dialogVisible1 = false;
        if (res.data.meta.status == 200) {
          this.$message({
            message: "恭喜你，编辑成功",
            type: "success",
          });
        }
      });
    },
    //权限
    power(row) {
      console.log(row);
     let defaultArr=[]
      function defa(row) {
        if (!row.children) {
          //children是否为空
          //不为空则将id放进数组
          return defaultArr.push(row.id);
        } //将数据中孩子持续放进defa函数中
        row.children.forEach((item) => defa(item));
      }
      defa(row);
      this.arr=defaultArr
      console.log(defaultArr)
      this.dialogVisible2 = true; //权限模态框
      this.roleId = row.id;
      // this.setCheckedKeys.$refs.tree;
      list().then((res) => {
        console.log(res);
        this.data = res.data.data;
      });
    },
    // 添加权限
    getCheckedKey() {
      // $refs.tree数据报表
      // this.arr = this.$refs.tree
      //   .getCheckedKeys()
      //   .concat(this.$refs.tree.getHalfCheckedKeys());
      // console.log(this.arr);
      let arr1 = this.$refs.tree.getCheckedKeys(); //被选中节点
      let arr2 = this.$refs.tree.getHalfCheckedKeys(); //半选中
      // console.log(arr1);
      console.log(arr2);
      addroles({
        roleId: this.roleId,
        rids: [...arr1, ...arr2].join(","),
      }).then((res) => {
        console.log(res);
        this.getlist();
        this.dialogVisible2 = false;
        if (res.data.meta.status == 200) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
        }
      });
    },
    // 删除权限
    dels(roleId, rightId) {
      console.log(roleId, rightId);
      deleteroles({ roleId, rightId }).then((res) => {
        console.log(res);
        this.getlist();
        if (res.data.meta.status == 200) {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      });
    },
  },
  created() {
    this.getlist();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped></style>
